<template>
  <div class="permission-management">
    <div class="page-header">
      <h1>权限管理</h1>
      <el-button type="primary" @click="openPermissionForm()">新增权限</el-button>
    </div>

    <el-card shadow="hover">
      <el-table :data="permissions" row-key="id" default-expand-all>
        <el-table-column prop="name" label="权限名称" />
        <el-table-column prop="code" label="权限标识" />
        <el-table-column prop="type" label="类型">
          <template #default="{ row }">
            <el-tag :type="typeMap[row.type].type">{{ typeMap[row.type].text }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template #default="{ row }">
            <el-button link type="primary" @click="openPermissionForm(row)">编辑</el-button>
            <el-button link type="danger" @click="deletePermission(row)">删除</el-button>
            <el-button link type="success" @click="openPermissionForm(null, row.id)">添加下级</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-dialog v-model="permissionFormVisible" :title="isEdit ? '编辑权限' : '新增权限'" width="600px">
      <el-form :model="permissionForm" label-width="100px">
        <el-form-item label="上级权限">
          <el-cascader
            v-model="permissionForm.parentId"
            :options="permissions"
            :props="{ checkStrictly: true, value: 'id', label: 'name' }"
            clearable
          />
        </el-form-item>
        <el-form-item label="权限名称"><el-input v-model="permissionForm.name" /></el-form-item>
        <el-form-item label="权限标识"><el-input v-model="permissionForm.code" /></el-form-item>
        <el-form-item label="类型">
          <el-radio-group v-model="permissionForm.type">
            <el-radio label="MENU">菜单</el-radio>
            <el-radio label="BUTTON">按钮</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="permissionFormVisible = false">取消</el-button>
        <el-button type="primary" @click="submitPermissionForm">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';

const permissionFormVisible = ref(false);
const isEdit = ref(false);

const typeMap = {
  MENU: { text: '菜单', type: 'primary' },
  BUTTON: { text: '按钮', type: 'success' },
};

const permissions = ref([
  { id: 1, name: '系统管理', code: 'system', type: 'MENU', children: [
    { id: 11, name: '用户管理', code: 'system:user', type: 'MENU', children: [
      { id: 111, name: '用户新增', code: 'system:user:add', type: 'BUTTON' },
      { id: 112, name: '用户编辑', code: 'system:user:edit', type: 'BUTTON' },
    ]},
    { id: 12, name: '角色管理', code: 'system:role', type: 'MENU' },
  ]},
  { id: 2, name: '业务管理', code: 'business', type: 'MENU' },
]);

const permissionForm = reactive({ id: null, parentId: null, name: '', code: '', type: 'MENU' });

const findAndModify = (nodes, targetId, action, data = null) => {
  for (let i = 0; i < nodes.length; i++) {
    const node = nodes[i];
    if (node.id === targetId) {
      if (action === 'delete') nodes.splice(i, 1);
      else if (action === 'add') {
        if (!node.children) node.children = [];
        node.children.push({ ...data, id: Date.now() });
      } else if (action === 'update') Object.assign(node, data);
      return true;
    }
    if (node.children && findAndModify(node.children, targetId, action, data)) return true;
  }
  return false;
};

const openPermissionForm = (perm, parentId = null) => {
  if (perm) {
    isEdit.value = true;
    Object.assign(permissionForm, { ...perm, parentId: perm.parentId || null });
  } else {
    isEdit.value = false;
    Object.assign(permissionForm, { id: null, parentId: parentId, name: '', code: '', type: 'MENU' });
  }
  permissionFormVisible.value = true;
};

const submitPermissionForm = () => {
  if (isEdit.value) {
    findAndModify(permissions.value, permissionForm.id, 'update', permissionForm);
    ElMessage.success('更新成功');
  } else {
    if (permissionForm.parentId) {
      findAndModify(permissions.value, permissionForm.parentId, 'add', permissionForm);
    } else {
      permissions.value.push({ ...permissionForm, id: Date.now() });
    }
    ElMessage.success('新增成功');
  }
  permissionFormVisible.value = false;
};

const deletePermission = async (perm) => {
  await ElMessageBox.confirm(`确定删除权限 "${perm.name}"?`, '提示', { type: 'warning' });
  findAndModify(permissions.value, perm.id, 'delete');
  ElMessage.success('删除成功');
};
</script>

<style scoped>
.permission-management { max-width: 1200px; margin: 0 auto; }
.page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.page-header h1 { font-size: 24px; font-weight: 700; }
</style> 